@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$typography: map.get(gio.$mat-theme, typography);

.more-filters {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 400px;
  border-left: 1px solid map.get(gio.$mat-dove-palette, darker20);
  background-color: mat.get-color-from-palette(gio.$mat-basic-palette, white);
  transition: right 0.5s ease-in-out;

  &__hidden {
    right: -400px;
    transition: right 0.5s ease-in-out;
  }

  &__header {
    display: flex;
    height: 76px;
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid map.get(gio.$mat-dove-palette, darker20);

    &__title {
      @include mat.typography-level($typography, subtitle-1);
    }
  }

  &__body {
    padding: 24px;
    overflow-y: auto;
    height: calc(100vh - 176px); // The height correspond to the viewport height minus the header and footer height.
  }

  &__footer {
    display: flex;
    padding: 24px;
    width: 100%;
    height: 100px;
    max-height: 100px;
    align-items: center;
    border-top: 1px solid map.get(gio.$mat-dove-palette, darker20);
    position: fixed;
    bottom: 0;

    .apply__button,
    .clear__button {
      min-width: 172px;
    }

    .clear__button {
      margin-right: 8px;
    }
  }
}

.main-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 401px;
  z-index: 70;
}
